
:root {
    --sh-gray: #F4F4F4;
    --sh-dark: #333;
    --sh-primary: #7047EB;
    --sh-border: #E7E7E7;
    --bs-nav-link-font-size: 14px;
    --bs-body-font-size: 14px;
    --bs-body-color: var(--sh-dark);

}

body {
    background: var(--bs-white);
}
html:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
    background: url("../static/MulticolorGlows.png") no-repeat top/900px;
}

.f-c-gray {
    color: var(--bs-gray-500);
}
.f-c-primary {
    color: var(--sh-primary);
}



.btn {
    font-size: .875rem;
}
.btn-light {
    --bs-btn-color: var(--sh-dark);
    --bs-btn-bg: var(--sh-gray);
    --bs-btn-border-color: var(--sh-gray);
    --bs-btn-hover-color: var(--sh-dark);
    --bs-btn-hover-bg: #f0f0f0;
    --bs-btn-hover-border-color: var(--sh-border);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.btn-white {
    --bs-btn-color: var(--sh-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--sh-border);
    --bs-btn-hover-color: var(--sh-dark);
    --bs-btn-hover-bg: #f0f0f0;
    --bs-btn-hover-border-color: var(--sh-border);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7047EB;
    --bs-btn-border-color: #7047EB;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5F38D5;
    --bs-btn-hover-border-color: #5F38D5;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.navbar-brand {
    width: 11rem;
}

.modal {
    --bs-modal-bg: var(--sh-gray)
}
.modal-header {
    justify-content: end;
    border: 0;
}
.modal-header .modal-title {
    margin-right: auto;
    line-height: 1.5rem;
}
.modal-header .btn-close {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
}
.form-check-input:checked {
    background-color: var(--sh-primary);
    border-color: var(--sh-primary);
}
.form-check-input:focus {
    border-color: var(--sh-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(112,71,235,.25);
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%237047EB'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23999999'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%237047EB'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
}

.svg-num {
    display: flex;
    gap: 1rem;
    font-size: .75rem;
    line-height: 1.5rem;
}
.count-info {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--bs-gray-500);
    fill: var(--bs-gray-500);
}

.sh-header {
    animation: change-background-color 16.8s infinite;
    background-image: linear-gradient(0deg,#fff,#f7f4ff);
    /*background: var(--bs-white);*/
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-bottom: 1px solid var(--sh-border);
}

.sh-header .sh-top {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    font-size: var(--bs-nav-link-font-size);
}
.sh-header .sh-top .btn {
    --bs-btn-font-size: var(--bs-nav-link-font-size)!important;
    --bs-btn-line-height: calc(1.5rem + 2px);
    font-weight: bold;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.sh-header .sh-top .top-search {
    padding: .75rem 0;
    flex: 1;
}
.sh-header .sh-top .top-search form {
    display: flex;
    background: var(--sh-gray);
    border: 1px solid var(--sh-border);
    border-radius: .25rem;
}
.sh-header .sh-top .top-search form input {
    line-height: 2.5rem;
    padding-left: .625rem;
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
}
.sh-header .sh-top .top-search form input::placeholder {
    color: var(--bs-gray-400);
    font-size: .75rem;
    font-weight: normal;
}
.sh-header .sh-top .top-search form button {
    width: 2.45rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
}

.sh-header .sh-top .nav {
    line-height: 4rem;
    font-weight: bold;
    gap: 2.5rem;
}
.sh-header .sh-top .nav a {
    padding: 0;
    color: var(--sh-dark)
}

.sh-header .sh-top .upload {
    background: none;
    border: none;
    display: flex;
    gap: 10px;
    align-items: center;
    height: 40px;

    color: var(--sh-primary);
    font-weight: bold;
    margin-right: auto;
}
.sh-header .sh-top .upload img {
    width: 32px;
}

.sh-header .sh-top .top-login {
    display: flex;
    gap: 1rem;
}

.sh-header .top-tabs {
    padding-left: 13.5rem;
}
.sh-header .top-tabs .nav {
    gap: 3rem;
}
.sh-header .top-tabs .nav .nav-link {
    padding: 0;
    line-height: 3rem;
    color: var(--sh-dark);
}
.sh-header .top-tabs .nav .nav-link.active {
    font-weight: bold;
    border-bottom: 2px solid var(--sh-dark);
}

.home-search {
    background: var(--bs-gray-100);
    padding: .5rem;
    border-radius: 1rem;
    margin-top: 6rem;
    margin-bottom: 10rem;
    max-width: 60rem;
}
.home-search form {
    width: 100%;
    border-radius: .5rem;
    background: var(--bs-white);
    display: flex;
    gap: 1rem;
    padding: .625rem;
    border: .25rem solid var(--sh-dark);
}
.home-search form input {
    flex: 1;
    line-height: 2.5rem;
    font-size: 1rem;
    border: none;
    outline: none;
    background: transparent;
}
.home-search form input::placeholder {
    font-size: .875rem;
    line-height: 2.5rem;
    color: var(--bs-gray-500);
}
.home-search form button {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-board-group {
    background: var(--sh-gray);
    padding: 1.25rem;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all .3s;
}
.svg-board-group:hover {
    box-shadow: 0 0 1rem var(--bs-gray-400);
}

.svg-group {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem
}

.svg-group .item {
    width: calc((100% - 1.25rem) / 3);
    height: calc((100% - 1.25rem) / 3);
    display: flex;
    justify-content: center;
    align-items: center;
}
.svg-group svg,
.svg-group img {
    max-width: 100%;
    height: auto;
}

.svg-info .svg-board-title {
    line-height: 2rem;
}

.search-body {
    position: relative;
    padding-left: 12.5rem;
}
.search-left {
    width: 12.5rem;
    padding: 1.25rem;
    border-right: 1px solid var(--sh-border);
    position: fixed;
    left: 0;
    top: 7.4375rem;
    height: calc(100vh - 7.4375rem);
}
.search-left .switch {
    background: var(--bs-white);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .5rem;
    margin-bottom: 2rem;
}


.search-left .filter {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.25rem;
}

.search-left .filter dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.search-left .filter dt {
    font-weight: normal;
    color: var(--bs-gray-500);
    margin: 0;
}
.search-left .filter dd {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
}
.search-left .filter dd .form-check-input[type="radio"] {
    border-color: var(--sh-dark);
    border-width: .125rem;
}
.search-left .filter dd .form-check-input:checked[type="radio"]{
    border-color: var(--sh-primary);
}
.search-right {
    padding: 2.5rem;
}
.search-result {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.svg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
}

.svg-list figure {
    background: var(--bs-white);
    display: flex;
    flex-direction: column;
    border-radius: .5rem;
    width: 7rem;
    height: 7rem;
    padding: 1rem;
    transition: all .3s;
}
.svg-list figure:hover {
    box-shadow: 0 0 1rem var(--bs-gray-400);
}
.svg-list figure .svg-icon {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.svg-list figure .svg-icon svg {
    width: 2rem;
    height: auto;
}
.svg-list figure figcaption {
    font-size: .75rem;
    line-height: 1.25rem;
    text-align: center;
    color: var(--bs-gray-500);
}

.board-notice {
    line-height: 1.25rem;
    font-size: .75rem;
    color: var(--sh-primary);
    display: flex;
    position: relative;
}
.board-notice span {
    margin: 0 auto;
    padding: 0 3rem;
    background: var(--sh-gray);
}
.board-notice:after {
    content: "";
    height: 1px;
    background: var(--sh-border);
    position: absolute;
    left: 0;
    right: 0;
    top: .625rem;
    z-index: -1;
}

.foot-tool {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
}
.foot-tool button {
    padding: 1rem;
    border-radius: 50%;
    background: transparent;
    border: .125rem solid var(--sh-primary);
}
.foot-tool button:last-child {
    background: var(--sh-primary);
}

.comment-box {
    max-width: 50rem;
}
.comment-send {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: end;
}
.comment-list {
    display: flex;
    flex-direction: column;
    gap: 3rem
}
.comment-list .comment-item {
    display: flex;
    gap: 1.25rem;
}
.comment-list .comment-item .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
}
.comment-list .comment-item .comment-content {
    flex: 1;
}
.comment-list .comment-item .comment-content .comment-info {
    display: flex;
    gap: 1.5rem;
    line-height: 1.75rem;
}
.comment-list .comment-item .comment-content .comment-info button {
    font-size: .75rem;
    text-decoration: none;
}
.comment-list .comment-item .comment-content .comment-body {
    line-height: 1.75rem;
}
.comment-list .comment-item .comment-content .comment-replay {
    margin-top: .5rem;
    padding: .625rem;
    background: var(--bs-white);
    border-radius: .5rem;
    line-height: 1.75rem;
}

.svg-detail-box {
    display: flex;
    padding: 1.5rem;
    gap: 2.5rem;
}

.svg-detail-box .svg-detail {
    width: 400px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.svg-detail-box .svg-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.svg-detail-box .svg-detail-tag {
    flex-grow: 1;
}
.svg-detail-box .svg-detail-tag .inner {
    margin: 1.5rem 0;
    display: flex;
    gap: .5rem;
}
.svg-detail-box .svg-detail-tag a {
    display: block;
    background: var(--bs-white);
    border: 1px solid var(--sh-border);
    font-size: .75rem;
    line-height: 1.875rem;
    padding: 0 .625rem;
    color: var(--bs-gray-500);
    text-decoration: none;
    border-radius: 2rem;
}
.svg-detail-box .svg-detail-tag a:hover {
    color: var(--bs-white);
    background: var(--sh-primary);
    border-color: var(--sh-primary);
}
